<template>
    <!-- 大屏顶部组件 -->
    <div class="page-top">
      <!-- 左侧logo信息部分 -->
      <div class="page-left" title="星辰集市logo">
        <img class="left-img" src="@/assets/logo/XCJSLogo1.png" alt="">
        <span class="left-text">星辰集市</span>
      </div>
      <!-- 中间部分 -->
      <div class="page-center">
        <span class="center-title">星辰集市实时数据大屏</span>
      </div>
      <div class="page-right">
        <span class="right-time">{{ currentTime }}</span>
      </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onBeforeUnmount } from "vue";
//引入工具函数
import { getNowTime } from "@/utils/tools.ts";
//当前时间
let currentTime = ref("1970年01月01日 00:00:00");
//定时器实例
let timer:any = null;

//获取时间实时更新
const getTime = () => {
    if(timer !== null) clearInterval(timer);
    timer = setInterval(()=> {
        currentTime.value = getNowTime();
    },1000)
}

//vue生命周期函数
onMounted(() => {
    getTime();
});
onBeforeUnmount(() => {
    clearInterval(timer);
})

</script>
<script lang="ts">
export default {
    name:"ScreenTop"
}
</script>

<style lang='scss' scoped>
.page-top{
    width: 100%;
    height: 100%;
    display: flex;

    /**左侧部分 */
    .page-left {
        flex:1;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        cursor: pointer;
        .left-img{
            width: 110px;
            height: 110px;
            border-radius: 50%;
        }
        .left-text{
            font-size: 38px;
            font-style: oblique;
            font-weight: bold;
        }
    }
    /**中间部分 */
    .page-center{
        flex: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 60px;
        font-weight: bold;
    }

    /**右侧部分 */
    .page-right{
        flex:1;
        margin: 20px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        font-size: 20px;
    }
}

</style>